import React, { Component } from 'react'
import {Button, Input, Form, Upload, Dialog, Message} from 'element-react'
import {withRouter} from 'react-router-dom'
import Breadcrumb from '../base/Breadcrumb'
import Select from '../base/Select'
import ImgUpload from '../base/ImgUpload'
import {FormWrapper} from '../base/BaseStatic'
// import styled from 'styled-components'

class afterSalesIncrease extends Component {
  constructor (props) {
    super(props)
    this.state = {
      // 申请类型选项
      applyTypeOptions: [
        {
          value: 'return_money',
          label: '退款'
        },
        {
          value: 'return_good_and_money',
          label: '退货退款'
        },
        {
          value: 'exchange_good',
          label: '换货'
        }
      ],
      // 表单数据
      form: {
        userID: null,
        orderID: null,
        applyType: null,
        refundReason: null,
        skuName: null,
        quantity: null,
        unit: null,
        refundAmount: null,
        userNote: null,
        dialogList: []
      }
    }
  }
  render () {
    const { dialogImageUrl, dialogVisible } = this.state.form
    return (
      <div>
        <Breadcrumb data={['售后', '新增售后申请']}/>
        {/* 表单 */}
        <FormWrapper model={this.state.form} labelWidth="80">
          <Form.Item label="* 会员ID"><Input
            placeholder="请输入会员ID"
            value={this.state.form.userID}
            onChange={this.getUserID.bind(this)}
          /></Form.Item>
          <Form.Item label="* 订单号"><Input
            placeholder="请输入订单号"
            value={this.state.form.orderID}
            onChange={this.getOrderID.bind(this)}
          /></Form.Item>
          <Form.Item label="* 申请类型"><Select options={this.state.applyTypeOptions} select={this.getApplyType.bind(this)}/></Form.Item>
          <Form.Item label="* 退款原因"><Input
            placeholder="请输入退款原因"
            value={this.state.form.refundReason}
            onChange={this.getRefundReason.bind(this)}
          /></Form.Item>
          <Form.Item label="* 商品信息">
            <Input
              style={{marginRight:'4px'}}
              placeholder="请输入sku名"
              value={this.state.form.skuName}
              onChange={this.getSkuName.bind(this)} />
            <Input
              style={{marginRight:'4px'}}
              placeholder="请输入商品数量"
              value={this.state.form.quantity}
              onChange={this.getQuantity.bind(this)} />
            <Input
              placeholder="请输入商品单位"
              value={this.state.form.unit}
              onChange={this.getUnit.bind(this)} />
          </Form.Item>
          <Form.Item label="* 退款金额"><Input
            placeholder="请输入退款金额"
            value={this.state.form.refundAmount}
            onChange={this.getRefundAmount.bind(this)}
          /></Form.Item>
          <Form.Item label="用户备注"><Input
            type="textarea"
            autosize={{ minRows: 2, maxRows: 4}}
            placeholder="请输入用户备注"
            value={this.state.form.userNote}
            onChange={this.getUserNote.bind(this)}
          /></Form.Item>
          <Form.Item label="图片凭证">
            <ImgUpload fileList={this.state.form.dialogList} handleSuccess={this.handleSuccess.bind(this)} handleRemove={this.handleRemove.bind(this)}></ImgUpload>
          </Form.Item>
          <Form.Item>
            <Button type="warning" size="large" onClick={() => {global.history.go(-1)}}>返回</Button>
            <Button type="success" size="large" onClick={this.submit.bind(this)}>提交</Button>
          </Form.Item>
        </FormWrapper>
      </div>
    )
  }
  // 提交回调
  submit () {
    // 新增退货原因
    this.$ajax.increaseReason({
      applicationAmount: this.state.form.refundAmount,
      applicationDescribe: this.state.form.applyType,
      applicationNum: this.state.form.quantity,
      applicationReason: this.state.form.refundReason,
      applicationRemark: this.state.form.userNote,
      imagesUrl: this.state.form.dialogList[0].response.data,
      manageId: /* this.state.form.refundAmount */124114,
      manageName: /* this.state.form.refundAmount */'42362346',
      numUnit: this.state.form.unit,
      orderId: this.state.form.orderID,
      orderItemId: this.state.form.orderID,
      userId: this.state.form.userID
    }).then(res => {
      if (res.code === 200) {
        Message({
          type: 'success',
          message: '新增成功!'
        })
        this.props.history.push(`/afterSalesList`)
      } else {
        Message.error('新增失败')
      }
    }).catch(() => {
      Message.error('网络错误')
    })
  }
  // 处理上传图片墙成功
  handleSuccess(response, file, fileList) { this.setState({ form: Object.assign({}, this.state.form, {
    dialogList: fileList
  }) }) }
  // 处理删除图片
  handleRemove (file, fileList) { this.setState({ form: Object.assign({}, this.state.form, {
    dialogList: fileList
  }) }) }
  
  // getter
  getUserID (val) { this.setState({ form: Object.assign({}, this.state.form, {userID: val}) }) }
  getOrderID (val) { this.setState({ form: Object.assign({}, this.state.form, {orderID: val}) }) }
  getApplyType (val) { this.setState({ form: Object.assign({}, this.state.form, {applyType: val}) }) }
  getRefundReason (val) { this.setState({ form: Object.assign({}, this.state.form, {refundReason: val}) }) }
  getSkuName (val) { this.setState({ form: Object.assign({}, this.state.form, {skuName: val}) }) }
  getQuantity (val) { this.setState({ form: Object.assign({}, this.state.form, {quantity: val}) }) }
  getUnit (val) { this.setState({ form: Object.assign({}, this.state.form, {unit: val}) }) }
  getRefundAmount (val) { this.setState({ form: Object.assign({}, this.state.form, {refundAmount: val}) }) }
  getUserNote (val) { this.setState({ form: Object.assign({}, this.state.form, {userNote: val}) }) }
}
export default withRouter(afterSalesIncrease)